/*
 * @Author: huangyingli
 * @Date: 2023-02-24 11:31:45
 * @LastEditors: huangyingli
 * @LastEditTime: 2023-02-25 19:42:14
 * @Description:
 */
import { Form, Row, Button } from 'antd';
import AsyncComponent from './AsyncComponent';
import { useEffect, forwardRef } from 'react';
import { fromJSON } from 'postcss';
import { ContentData } from '../api/contentManage';
import { unique } from '../utils/utils';
const layout = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 10,
  },
};

const tailLayout = {
  wrapperCol: { span: 24 },
};
export default function AsyncForm(props) {
  const [form] = Form.useForm();
  const config = props.config;
  function onFinish(values) {
    console.log('动态组件数据', values);
    if (props.onFinish) {
      props.onFinish(values);
    }
  }
  useEffect(() => {
    let componentMsg = props.compoentData;
    // 通过组件配置渲染对应表单
    if (!componentMsg) return;
    let uuid = unique(
      componentMsg.columnId,
      componentMsg.modalId,
      componentMsg.key,
      componentMsg.id
    );
    form.resetFields();
    ContentData({ data: { uuid, tableName: componentMsg.tableName } }).then(
      (msg) => {
        console.log('组件数据', msg.data);
        form.setFieldsValue(msg.data.data[0] || {});
      }
    );
  }, [props.config]);
  return (
    <div>
      <Form {...layout} form={form} name='async-form' onFinish={onFinish}>
        {config.map((c, index) => (
          <Form.Item name={c.form.key} label={c.form.label} key={index}>
            <AsyncComponent config={c} />
          </Form.Item>
        ))}

        <Form.Item {...tailLayout}>
          <Row justify='center'>
            <Button
              type='primary'
              htmlType='submit'
              style={{ marginLeft: '30px' }}
            >
              保存
            </Button>
          </Row>
        </Form.Item>
      </Form>
    </div>
  );
}
